<template>
  <div class="rightbox" v-cloak>
    <h1>医生新增
      <el-button style="margin-left:20px;" type="primary" size="small" @click="addtext">新增文本</el-button>
      <el-button type="primary" size="small" @click="addimg">新增图片</el-button>
      <el-button type="primary" size="small" @click="addfile">新增视频</el-button>
    </h1>
    <div class="add-box" style="width:850px;">
      <el-form ref="form" :model="form" label-width="140px">
        <el-form-item
          prop="departmentindex"
          label="所属科室"
          :rules="[
            { required: true, message: '请选择所属科室', trigger: 'blur' }
          ]"
        >
          <el-cascader
            expand-trigger="hover"
            :options="departData"
            v-model="form.departmentindex"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item
          prop="numberindex"
          label="医生级别"
          :rules="[
            { required: true, message: '请选择医生级别', trigger: 'blur' }
          ]"
        >
          <el-select v-model="form.numberindex" placeholder="请选择产品栏目">
            <el-option v-for="(item, index) in numerList" v-bind:key="index" v-bind:label="item.name" v-bind:value="item.numberindex"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="姓名"
          prop="name"
          :rules="[
            { required: true, message: '请输入医生姓名', trigger: 'blur' }
          ]"
        >
          <el-input style="width:200px;" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item
          label="性别"
          prop="sex"
          :rules="[
            { required: true, message: '请选择性别', trigger: 'blur' }
          ]"
        >
          <el-radio v-model="form.sex" label="1">男</el-radio>
          <el-radio v-model="form.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item
          prop=""
          border
          label="排班日期">
          <el-table
            border
            :data="form.weekdata"
          >
            <el-table-column
              prop=""
              label="日期">
                <template slot-scope="scope">
                  <span style="margin-right:20px;">{{scope.row.weekstr}}</span>
                  <el-radio label="1" v-model="scope.row.time" border @change="scope.row.timestr = '上午'">上午</el-radio>
                  <el-radio label="2" v-model="scope.row.time" border @change="scope.row.timestr = '下午'">下午</el-radio>
                  <el-radio label="3" v-model="scope.row.time" border @change="scope.row.timestr = '全天'">全天</el-radio>
                  <span style="padding:20px;cursor:pointer;" @click="scope.row.time = ''">清除</span>
                </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item
          label="简介"
          prop="remarks"
          :rules="[
            { required: true, message: '请输入简介', trigger: 'blur' }
          ]"
        >
          <el-input type="textarea" v-model="form.remarks"></el-input>
        </el-form-item>
        <el-form-item
          label="头像"
          prop="thumbnail"
        >
          <el-input type="file" class="thumbnail" v-model="form.thumbnail" style="width:350px;float:left;"></el-input>
        </el-form-item>
        <el-form-item
          label="状态"
          prop="state"
          :rules="[
            { required: true, message: '请选择状态', trigger: 'blur' }
          ]"
        >
          <el-radio v-model="form.state" label="1">启用</el-radio>
          <el-radio v-model="form.state" label="-1">禁用</el-radio>
        </el-form-item>
        <div v-for="(item, index) in form.contentList" v-bind:key="index">
          <el-form-item
            :prop="'contentList.' + index + '.value'"
            label="文字内容"
            v-if="item.type == 1"
          >
            <el-input type="textarea" v-bind:label="item.name" v-model="item.value" style="width:350px;float:left;"></el-input>
            <el-button style="float:left;margin-left:20px;" @click="removeDomain(index,item)">删除</el-button>
          </el-form-item>
          <el-form-item
            :prop="'contentList.' + index + '.value'"
            label="内容图片"
            v-if="item.type == 2"
          >
            <el-input @change="changeimg(item)" type="file" v-model="item.value" v-bind:label="item.name" class="fileinput"  style="width:350px;float:left;"></el-input>
            <el-button style="float:left;margin-left:20px;" @click="removeDomain(index,item)">删除</el-button>
          </el-form-item>
          <el-form-item
            label="内容视频"
            v-if="item.type == 3"
            :prop="'contentList.' + index + '.value'"
          >
            <el-input @change="changevideo(item)" type="file" v-model="item.value" v-bind:label="item.name" class="fileinput"  style="width:350px;float:left;"></el-input>
            <el-button style="float:left;margin-left:20px;" @click="removeDomain(index,item)">删除</el-button>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submit('form')">提交</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import $ from 'jquery'
export default {
  data () {
    return {
      form: {
        departmentindex: [],
        numberindex: '',
        name: '',
        sex: '',
        remarks: '',
        state: '1',
        thumbnail: '',
        contentList: [],
        weekdata: [
          {time: '', week: 1, weekstr: '星期一', timestr: ''},
          {time: '', week: 2, weekstr: '星期二', timestr: ''},
          {time: '', week: 3, weekstr: '星期三', timestr: ''},
          {time: '', week: 4, weekstr: '星期四', timestr: ''},
          {time: '', week: 5, weekstr: '星期五', timestr: ''},
          {time: '', week: 6, weekstr: '星期六', timestr: ''},
          {time: '', week: 7, weekstr: '星期日', timestr: ''}
        ]
      },
      doctorindex: '',
      departData: [],
      numerList: []
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.form.Selection = val
    },
    changeimg (item) {
      var timestamp = new Date().getTime()
      item.index = 0
      item.name = 'img' + timestamp
    },
    changevideo (item) {
      var timestamp = new Date().getTime()
      item.index = 0
      item.name = 'img' + timestamp
    },
    getParams () {
      var that = this
      that.doctorindex = that.$route.params.doctorindex
      that.$pub.open()
      if (that.doctorindex) {
        axios.post('/gp/Doctor/Eidt', qs.stringify({
          doctorindex: that.doctorindex
        })
        )
          .then((res) => {
            that.$pub.close()
            if (res.data.code === 0) {
              for (var b = 0; b < res.data.data.fileModel.length; b++) {
                if (res.data.data.fileModel[b].type !== 1) {
                  res.data.data.fileModel[b].value = ''
                  res.data.data.fileModel[b].name = ''
                }
              }
              for (var q = 0; q < res.data.data.weekModel.length; q++) {
                for (var t = 0; t < that.form.weekdata.length; t++) {
                  if (res.data.data.weekModel[q].week === that.form.weekdata[t].week) {
                    that.form.weekdata[t].time = res.data.data.weekModel[q].time + ''
                    that.form.weekdata[t].timestr = res.data.data.weekModel[q].timeStr
                  }
                }
              }
              that.form.departmentindex = [res.data.data.superior, res.data.data.departmentindex]
              that.form.contentList = res.data.data.fileModel
              that.form.numberindex = res.data.data.numberindex
              that.doctorindex = res.data.data.doctorindex
              that.form.name = res.data.data.name
              that.form.sex = res.data.data.sex + ''
              that.form.state = res.data.data.state + ''
              that.form.remarks = res.data.data.remarks
            } else {
              that.$pub.failcode(that, res.data.code, res.data.data)
            }
          })
          .catch(function () {
            that.$pub.catchbox(that)
          })
      } else {
        that.$router.push({
          name: 'proDataList'
        })
      }
    },
    getList: function () {
      var that = this
      that.$pub.open()
      axios({
        method: 'post',
        url: '/gp/Department/Index'
      })
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            var departData = []
            for (var i = 0; i < res.data.data.length; i++) {
              departData.push({value: res.data.data[i].departmentindex, label: res.data.data[i].name, children: []})
              for (var j = 0; j < res.data.data[i].subset.length; j++) {
                departData[i].children.push({value: res.data.data[i].subset[j].departmentindex, label: res.data.data[i].subset[j].name})
              }
            }
            that.departData = departData
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
      axios({
        method: 'post',
        url: '/gp/Number/Index'
      })
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            that.numerList = res.data.data
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    },
    getThumbnail ($event) {
      var that = this
      var file = $event.currentTarget.files[0]
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function () {
        that.form.thumbnail = this.result
      }
    },
    getFile (item, $event) {
      var file = $event.currentTarget.files[0]
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function () {
        item.value = this.result
      }
    },
    addtext: function () {
      var timestamp = new Date().getTime()
      this.form.contentList.push({
        type: 1,
        value: '',
        name: 'text' + timestamp
      })
    },
    addimg: function () {
      var timestamp = new Date().getTime()
      this.form.contentList.push({
        type: 2,
        value: '',
        name: 'img' + timestamp
      })
    },
    addfile: function () {
      var timestamp = new Date().getTime()
      this.form.contentList.push({
        type: 3,
        value: '',
        name: 'file' + timestamp
      })
    },
    removeDomain (index, item) {
      var inde = this.form.contentList.indexOf(item)
      if (inde !== -1) {
        this.form.contentList.splice(inde, 1)
      }
    },
    selection () {
      this.$refs.multipleTable.toggleRowSelection(this.form.allprice[2], true)
    },
    submit: function (form) {
      var that = this
      var weektime = []
      for (var i = 0; i < that.form.weekdata.length; i++) {
        if (that.form.weekdata[i].time !== '') {
          weektime.push(that.form.weekdata[i])
        }
      }
      var formFile = new FormData()
      that.$refs[form].validate((valid) => {
        if (valid) {
          $('.fileinput input').each(function () {
            formFile.append($(this).attr('aria-label'), $(this).prop('files')[0])
          })
          for (var b = 0; b < that.form.contentList.length; b++) {
            if (that.form.contentList[b].type !== 1) {
              that.form.contentList[b].value = ''
            }
          }
          var headimage = $('.thumbnail input').prop('files')[0]
          formFile.append('doctorindex', that.doctorindex)
          formFile.append('headimage', headimage)
          formFile.append('departmentindex', that.form.departmentindex[1])
          formFile.append('numberindex', that.form.numberindex)
          formFile.append('name', that.form.name)
          formFile.append('sex', that.form.sex)
          formFile.append('price', that.form.price)
          formFile.append('fileModel', JSON.stringify(that.form.contentList))
          formFile.append('remarks', that.form.remarks)
          formFile.append('state', that.form.state)
          formFile.append('weektime', JSON.stringify(weektime))
          $.ajax({
            type: 'post',
            url: '/gp/Doctor/EidtPost',
            dataType: 'json',
            data: formFile,
            processData: false,
            contentType: false,
            success: function (data) {
              if (data.code === 0) {
                that.$alert('修改成功', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    that.resetForm(form)
                    that.$router.push({
                      name: 'proDataList'
                    })
                  }
                })
              } else {
                that.$pub.failcode(that, data.code, data.data)
              }
            },
            error: function (data) {
              that.$pub.catchbox(that)
            }
          })
        }
      })
    },
    resetForm: function (form) {
      this.$refs[form].resetFields()
      this.form.contentList = []
    }
  },
  mounted () {
    this.getParams()
    this.getList()
  }
}
</script>
